<template>
  <div class="custom-tree-container">
    <el-button type="warning" @click="addFirstNode">添加一级节点</el-button>
    <el-tree
      :data="dataSource"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <a @click="append(data)" v-if="node.level != 4"> 添加 </a>
            <a style="margin-left: 8px" @click="modify(node,data)"> 修改 </a>
            <a style="margin-left: 8px" @click="remove(node, data)"> 删除 </a>
          </span>
        </span>
      </template>
    </el-tree>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
    <span>输入节点名称</span>
    <el-input v-model="nodeValue" placeholder="Please input" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addNodeConfirm"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,onMounted } from "vue";

import { ElMessage } from "element-plus";
import axios from "axios";

let id = 1000;
let level = 0;
let uuid = "";
let addFlag = false;
const dialogVisible = ref(false);
let dataSource = ref([])

let nodeValue = ref("");

// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm('Are you sure to close this dialog?')
//     .then(() => {
//       done()
//     })
//     .catch(() => {
//       // catch error
//     })
// }

onMounted(() => {
  getTreeList();
})
const modify = (node,data) => {
  console.log('data',data)
  level = data.level
  uuid = data.id
  dialogVisible.value = true;
}
const addNodeConfirm = async () => {
  console.log('addFlag',addFlag)
  if (level == 0 && addFlag) {
    const newChild = { id: id++, label: nodeValue.value, children: [] };

    let res = await axios.post("/adminapi/categoryTree/teacherAdd", {
      teacherName: nodeValue.value,
    });
    if (res.data.code == 200) {
      ElMessage.success("添加成功");
    } else {
      ElMessage.error("添加失败");
    }
  
    // dataSource.value.push(newChild)
  }
  if (level == 1 && addFlag) {
    console.log("111111");
    let res = await axios.post("/adminapi/categoryTree/seriesAdd", {
      seriesName: nodeValue.value,
      fatherId: uuid,
    });
    if (res.data.code == 200) {
      ElMessage.success("添加成功");
    } else {
      ElMessage.error("添加失败");
    }
  }
  if (level == 2 && addFlag) {
    let res = await axios.post("/adminapi/categoryTree/sectionAdd", {
      sectionName: nodeValue.value,
      fatherId: uuid,
    });
    if (res.data.code == 200) {
      ElMessage.success("添加成功");
    } else {
      ElMessage.error("添加失败");
    }
  }
  if (level == 3 && addFlag) {
    let res = await axios.post("/adminapi/categoryTree/chapterAdd", {
      chapterName: nodeValue.value,
      fatherId: uuid,
    });
    if (res.data.code == 200) {
      ElMessage.success("添加成功");
    } else {
      ElMessage.error("添加失败");
    }
  }
  if(!addFlag) {
    console.log('uuid',uuid)
    let res = await axios.post("/adminapi/categoryTree/modify", {
      label: nodeValue.value,
      level:level,
      id: uuid,
    });
    if (res.data.code == 200) {
      ElMessage.success("修改成功");
    } else {
      ElMessage.error("修改失败");
    }
  }
  addFlag = false
  nodeValue.value = "";
  dialogVisible.value = false;
  uuid = "";
  level = 0;
  getTreeList()
};
const addFirstNode = () => {
  dialogVisible.value = true;
  addFlag = true
  // level = 1;
};
const append = async (data) => {
  dialogVisible.value = true;
  uuid = data.id;
  level = data.level;
  addFlag = true
};

const remove = async (node, data) => {
  // const parent = node.parent;
  // const children = parent.data.children || parent.data;
  // const index = children.findIndex((d) => d.id === data.id);
  // children.splice(index, 1);
  // dataSource.value = [...dataSource.value];
  console.log('node',node)
  let res = await axios.post('/adminapi/categoryTree/delete',{
    id:data.id,
    level:data.level
  })
  if (res.data.code == 200) {
      ElMessage.success("删除成功");
    } else {
      ElMessage.error("删除失败");
    }
    getTreeList()
};


const getTreeList = async() => {
 let res = await axios.get('/adminapi/categoryTree/list');
 if(res.data.code == 200) {
  dataSource.value = res.data.data
  console.log('dataSource.value ',dataSource.value )
 }
 
}


 
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>